<!--
 * @Author: FengTeng
 * @Date: 2021-02-13 13:29:19
 * @LastEditTime: 2021-03-03 09:46:01
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\create-customer-modal\CreateCustomerModal.vue
-->
<template>
  <div class="create-customer-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="customerFormConfig.rules" ref="customerFormRef" :model="customerFormData">
        <el-form-item label="联系方式：" prop="phoneNumber">
          <el-input v-model="customerFormData.phoneNumber" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="称呼：" prop="nickname">
          <el-input v-model="customerFormData.nickname" placeholder="请输入客户称呼"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-select
            v-model="customerFormData.sex"
            @change="handleSexItemChange()"
            :popper-append-to-body="false"
            placeholder="请选择客户性别"
          >
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向：" prop="intention">
          <el-select
            v-model="customerFormData.intention"
            @change="handleIntentionItemChange()"
            :popper-append-to-body="false"
            placeholder="请选择成交意向"
          >
            <el-option label="购买物品" value="buyGoods"></el-option>
            <el-option label="购买服务" value="buyServers"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-option-button">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import apis from "@/apis/index.js";
import $ from "jquery";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
import { mapState } from "vuex";
export default {
  name: "CreateCustomerModal",
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    SpaModal
  },
  data() {
    return {
      customerFormData: {
        phoneNumber: "18888888888",
        nickname: "胡先生",
        sex: "男",
        intention: "购买服务"
      },
      customerFormConfig: {
        rules: {
          phoneNumber: [
            { required: true, message: "请输入联系电话！", trigger: "blur" },
            { min: 11, max: 11, message: "请输入正确格式的联系电话！", trigger: "blur" }
          ],
          nickname: [{ required: true, message: "请输入客户称呼！", trigger: "blur" }],
          sex: [{ required: true, message: "请选择客户性别！", trigger: "blur" }],
          intention: [{ required: true, message: "请选择成交意向！", trigger: "blur" }]
        }
      },
      confirmBtnLoading: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.authInfoModule.userinfo
    })
  },
  methods: {
    handleConfirm() {
      console.log("提交表单", this.customerFormData);
      console.log(this.formDataValidate());
      this.confirmBtnLoading = true;
      $.post(
        apis.createCustomerApi,
        {
          id: "123",
          chenghu: this.customerFormData.nickname,
          phone: this.customerFormData.phoneNumber,
          sex: this.customerFormData.sex,
          chenjiaoyixiang: this.customerFormData.intention,
          cjren: this.userInfo.name,
          gjren: this.userInfo.name,
          type: "insert"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            this.$emit("refresh-table");
            this.modalConfig.visible = false;
            this.confirmBtnLoading = false;
            this.$message.success(resp.msg);
          } else {
            this.$message.error(resp.msg);
            this.confirmBtnLoading = false;
          }
        }
      );
    },
    handleCancel() {
      console.log("取消提交");
      this.modalConfig.visible = false;
    },
    handleDialogClose() {
      this.resetFormData();
    },
    handleSexItemChange() {
      this.formItemValidate("sex");
    },
    handleIntentionItemChange() {
      this.formItemValidate("intention");
    },
    formDataValidate() {
      let valid = false;
      this.$refs.customerFormRef.validate(_valid => {
        valid = _valid ? true : false;
        return valid;
      });
      return valid;
    },
    formItemValidate(prop) {
      this.$refs.customerFormRef.validateField(prop, error => {
        if (error) {
          console.error(prop + "未通过校验！");
        }
      });
    },
    resetFormData() {
      console.log("重置表单");
      this.customerFormData = {
        phoneNumber: "",
        nickname: "",
        sex: "",
        intention: ""
      };
      this.confirmBtnLoading = false;
      this.$refs.customerFormRef && this.$refs.customerFormRef.resetFields();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
